/*
* 苏州海管家物流科技有限公司（https://www.hgj.com/）.
* 苏公网安备32059002003385号 © 2015-2022 Hgj.com All Rights Reserved. | 苏ICP备15030950号.
* @Date: 2022.05.29.
* @Author
* @Description 企点管理后台 -模块 查询条件 组件.
**/
<script setup lang="ts" name="TableList">

import { toRefs } from 'vue'
import {IKey} from "@/typings"

// 传入查询条件list
interface IProps {
    list: [],
    tableColumn: [],
    firstColumn: {
        label: string,
        type: string
    },
    tableOperation: [],
}
// emit 方法使用的数据类型
interface IEmit {
    // eslint-disable-next-line no-unused-vars
    (e: 'emitSearch', data: IKey): void,
    // eslint-disable-next-line no-unused-vars
    (e: 'emitReset', data: IKey): void,
}

const props = withDefaults(defineProps<IProps>(), {
    list: () => [],
    tableColumn: () => [],
    firstColumn: () => {
        return {
            label: '',
            type: ''
        }
    },
    tableOperation: () => []
})
const { list, tableColumn } = toRefs(props)

console.log('query---------------------', list.value)
console.log('query---------------------', props.list)

// const emit = defineEmits(['emitSearch', 'emitReset'])
const emit = defineEmits<IEmit>()

/**
 *@Description 查询 按钮 触发事件 .
 *@Return  将传入的数据 id+value 组装成对象 emit出去 （id:value） .
**/
const handleSearchClick = () => {
    let obj: IKey = {}

    emit('emitSearch', {...obj})
}
/**
 *@Description 重置 按钮 触发事件 .
 *@Return .
**/
const handleResetClick = () => {
    let obj: IKey = {}

    emit('emitReset', {...obj})
}

</script>
<template>
  <el-table :data="list" ref="multipleTable" row-key="id" resizable border>

    <el-table-column width="60" :type="firstColumn.type" :label="firstColumn.label" v-if="firstColumn.type" />

    <el-table-column v-for="(item, index) in tableColumn" :key="index" :label="item.label" show-overflow-tooltip>

      <template #default="{ row }">
        {{ row[item.prop] }}
      </template>
    </el-table-column>

    <el-table-column fixed="right" label="操作" width="100px">
      <template #default="{ row }">
        <span v-for="(item, index) in tableOperation" :key="index" @click="handleOptionClick(row)">{{ item.label }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<style lang="scss" scoped>

</style>
